<template>

  <div>

    <el-collapse v-model="activeNames" v-for="(one, index) in allData" @change="handleChange">

      <el-collapse-item :title="one.title" :name="index + 1">
        <div v-for="oneone in one.data" id="context">
          <el-form :ref="oneone" :model="oneone" label-width="80px" label-position="left">

            <el-form-item :label="oneone.name" :prop="oneone.el" v-if="oneone.type != 'select'" :class="oneone.class">

              <el-input v-model="oneone.value" :type="oneone.type" placeholder=""></el-input>

            </el-form-item>

            <el-form-item :label="oneone.name" :prop="oneone.el" v-else-if="oneone.type == 'select'"
              :class="oneone.class">
              <el-select v-model="oneone.value" placeholder="请选择活动区域">
                <el-option :label="opt.name" v-for="opt in oneone.option.split(';')" :value="opt"></el-option>
              </el-select>
            </el-form-item>

          </el-form>
          <el-button @click="submits">提交</el-button>
          
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  data() {
    return {
     allData: [ 
        {
          title: "用户信息列表",
          data: [
            {
              name: "活动名称",
              el: "hdmc",
              value: "",
              type: "text",
              class: "long"
            },
            {
              name: "活动密码",
              el: "hdmm",
              value: "",
              type: "password",
              class: "short"
            },
            {
              name: "活动日期",
              el: "hdrq",
              value: "",
              type: "date",
              class: "short"
            },
            {
              name: "下拉框",
              option: "区域一;区域二",
              value: "",
              type: "select",
              class: "short"
            },
          ],
        },

        {
          title: "家庭信息列表",
          data: [
            {
              name: "活动名称2",
              el: "hdmc2",
              value: "v-model",
              type: "text",
              width : "50%"
            },
            {
              name: "活所示但是分解",
              el: "hdmc2",
              value: "v-model",
              type: "text",
              order: 1,
            },
            {
              name: "91期",
              el: "hdmc32",
              value: "",
              type: "password",
            },
            {
              name: "下拉框2",
              option: "区域一;区域二;新选项",
              value: "",
              type: "select",
            },
          ],
        },
        
      ],
      activeNames: ["1"],
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
      console.log('没值：'+this.allData)
      console.log(this.allData)
    },
    submits(){
      console.log('有值：'+this.allData)
      console.log(this.allData)
    }
  },
};
</script>
<style>
body>.el-container {
  margin-bottom: 40px;
  display: inline-block;
}

/* 调整整个名字和输入框占的盒子大小 */
/* #context {
 float: left;  
  width: 20%; 
  margin-left: 50px; 
}  */
.long {
  width: 1050px;
  margin-left: 50px;
}

.short {
  float: left;
  width: 500px;
  margin-left: 50px;
}
</style>